// 注册全局指令-插件
// Vue.use() - 给Vue注册插件
// 思路: 给Vue.use传入一个对象(必须有install方法)
import Vue from 'vue'
export default {
  install () {
    Vue.directive('fofo', {
      // 指令所在标签, 被插入到真实DOM上才执行
      inserted (el) {
        f(el)
      },
      // 指令所在标签, 更新时(隐藏/显示css方式), 执行这个方法
      update (el) {
        f(el)
      }
    })
  }
}

function f (el) {
  // el就是指令所在原生标签
  // 问题: 无效
  // 原因: v-fofo绑定在了van-search组件身上(el标签实际上是div)
  // 解决: 原生的方式, 往里找到input标签名
  // el.querySelector('input').focus()
  let isFind = false // 标记-没找到-提示用户你的指令可能用错地方了
  // 获取标签的名字: div.nodeName的值就是"DIV"
  // 指令想通用: 必须判断
  // 判断el的值
  if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
    // el本身就是input/textarea直接调用focus聚焦
    el.focus()
    isFind = true
  } else {
    // el本身不是, 尝试往里获取
    const inp = el.querySelector('input')
    const ta = el.querySelector('textarea')
    // inp不是null才能往后执行
    // inp要是null后面不会执行
    if (inp && inp.nodeName === 'INPUT') {
      inp.focus()
      isFind = true
    }
    if (ta && ta.nodeName === 'TEXTAREA') {
      ta.focus()
      isFind = true
    }
  }

  // 兜底判断
  if (isFind === false) {
    // 证明这个指令可能绑定在了非textarea 和 input身上
    throw new Error('不要玩弄老子, 你把fofo给我绑定在输入框上可好?')
  }
}
